<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
<!--    1.v-bind简写为：-->
<!--    用于绑定一个或多个属性值，或者向另一个组件传递props值-->
<!--    在开发中有哪些属性需要动态进行绑定呢？-->
<!--    比如动态绑定a元素的href属性，动态绑定img元素的src属性，动态绑定一些类、样式等-->

<!--    2.事件监听@click(原生的)  @tabclick(子组件发射的事件)-->
    <tab-control class="tabcontrol"
                 :titles="['流行','新款','精选']"
                 @tabclick="tabClick"
                 ref="tabcontrol1"
                 v-show="isTabFixed">
    </tab-control>

    <scroll class="content" ref="scroll" :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @loadMore="loadmore">


      <home-swiper :banners="banners"  @swiperload="swiperload" ref="hSwiper"></home-swiper>
      <home-recommend :recommends="recommends"></home-recommend>
      <feature-view></feature-view>

      <tab-control
        :titles="['流行','新款','精选']"
        @tabclick="tabClick"
        ref="tabcontrol2"></tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </scroll>

    <!--  原生的元素例如button div都可以@click-->
    <!--    自己创建的组件不可以直接监听   必须要@click.native才可以-->
    <!--    v-show="true"显示    v-show="false"隐藏-->
    <back-top @click.native="backClick" v-show="isShow"></back-top>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import Scroll from "@/components/common/scroll/Scroll";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import BackTop from "@/components/content/backtop/BackTop";


import HomeSwiper from "@/views/home/childrenComps/HomeSwiper";
import HomeRecommend from "@/views/home/childrenComps/HomeRecommend";
import FeatureView from "@/views/home/childrenComps/FeatureView";


import {getHomeMultidata, getHomeGoods} from "@/network/home";
import {debounce} from "@/common/utils";


export default {
  name: "Home",
  components: {
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
    HomeSwiper,
    HomeRecommend,
    FeatureView,

  },
  activated: function () {
    this.$refs.hSwiper.startTimer()
  },
  deactivated: function () {
    this.$refs.hSwiper.stopTimer()
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        'pop': {page: 0, list: []},
        'new': {page: 0, list: []},
        'sell': {page: 0, list: []}
      },
      currentType: 'pop',
      isShow: false,
      tabOffSetTop: 0,
      isTabFixed: false
    }
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list
    }
  },
  created() {
    //1.请求多个数据
    this.getHomeMultidata();
    // 2.请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')

  },
  mounted() {
    // 1.图片加载完成的事件监听
    // 2.debounce刷新频繁的防抖函数处理，不是加载完一张图片就刷新一次，
    // 3.封装在common下的utils.js下面
    // 4.debounce(func,delay)  func对哪个函数进行防抖，delay等多久
    const refresh = debounce(this.$refs.scroll.refresh,50)
    // this.$bus.$on事件总线监听
    this.$bus.$on('itemImageLoad', () => {
      refresh()
    })
  },
  methods: {
    //网络请求相关方法
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        console.log(res)
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;

      })
    },
    getHomeGoods(type) {
      // 一开始加1，只是为了请求时传参，请求下一页的数据
      const page = this.goods[type].page + 1
      // 现在拿到的result是pop的前30条数据
      // ...res.data.list将数组中的元素进行解析，然后在push到其他数组里
      //  请求的数据已经拿到，对应的goods[type].page加1
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1

        // 完成一次加载之后，必须调用这个方法。只有这样才能进行下一次的加载，否则只能默认加载一次
        this.$refs.scroll.finishPullUp()
      })
    },
    //事件监听相关方法
    tabClick(index) {

      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      // 让两个tabcontrol都同步
      this.$refs.tabcontrol1.currentIndex = index
      this.$refs.tabcontrol2.currentIndex = index
    },
    backClick() {
      this.$refs.scroll.scrollTo(0, 0, 500)
    },
    contentScroll(position) {
      //1.判断backtop是否显示
      this.isShow = (-position.y) > 1000
      //2.判断tabcontrol是否吸顶
      this.isTabFixed = (-position.y) > this.tabOffSetTop
    },
    loadmore() {
      this.getHomeGoods(this.currentType)
    },
    swiperload() {
      // 为了能够拿到tabOffsetTop，绑定一个属性ref="tabControl2"，拿到组件，
      // 组件没有offsetTop属性，而是要拿到组件对应的元素，所有的组件都有一个属性$el,用来获取组件中的元素，
      // 一定要等轮播图加载出来之后,再去获得offsetTop
      this.tabOffSetTop = this.$refs.tabcontrol2.$el.offsetTop
    }

  }
}
</script>

<style scoped>
.home-nav {
  background-color: var(--color-tint);
  color: white;
  /*position: fixed;*/
  /*  left: 0;*/
  /*  top: 0;*/
  /*  right: 0;*/
  /*  z-index: 9;*/
}

#home {

  height: 100vh;
  position: relative;
}

/*.tabcontrol{*/
/*  position: sticky;*/
/*  top: 44px;*/
/*  z-index: 9;*/
/*}*/
.content {
  /*height: calc(100% - 50px);*/
  /*overflow: hidden;*/
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;

}

.tabcontrol {
  position: relative;
  z-index: 9;
}

</style>
